@import "@/lib/reset.scss";
html,body,.girl{
  @include rect(100%,100%);

}
@font-face {
  font-family: 'newicon';
  src: url('./font/iconfont.eot');
  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('./font/iconfont.woff') format('woff'),
  url('./font/iconfont.ttf') format('truetype'),
  url('./font/iconfont.svg#iconfont') format('svg');
}
.icon{
  font-family: 'newicon';
  color: #000;
}
.girl {
  @include flexbox();
  flex-direction: column;
  header {
    @include rect(100%, 0.44rem);
    @include flexbox();
    .spans {
      display: block;
      @include rect(0.5rem, 100%);
      @include flexbox();
      justify-content: center;
      align-items: center;
    }
    div {
      @include flex();
      @include flexbox();
      justify-content: center;
      align-items: center;
    }
  }

  .contentgirl{
    @include flex();
    @include rect(100%,auto);
    overflow: auto;
    nav{
      @include rect(100%,0.94rem);
      box-sizing: border-box;
      padding: 0.14rem 0.12rem;
      ul{@include rect(100%,100%);
        @include flexbox();
        justify-content: space-between;
        align-items: center;
        a{
          @include flex();
          @include flexbox();
          height: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          span{
            display: block;
            @include rect(0.44rem,0.44rem);
            background-image: url('http://img-tailor.11222.cn/pm/book/operate/2017022317384553.png');
            background-repeat: no-repeat;
            background-position: 0 0;
            background-size: 0.44rem auto;
          }
          .home_s1{
            background-position: 0 -0.44rem;
          }
          .home_s2{
            background-position: 0 -0.88rem;
          }
          .home_s3{
            background-position: 0 -1.32rem;
          }
          .home_s4{
            background-position: 0 -1.76rem;
          }
        }

      }
    }

    .home_undernav{
      @include rect(100%,0.42rem);
      box-sizing: border-box;
      padding: 0.14rem 0.14rem;
      font-size: 16px;

      @include flexbox();
      align-items: center;
      justify-content: space-between;

    }
    .home_img{
      @include rect(100%,0.64rem);
      img{
        @include rect(100%,100%)
      }
    }
    .home_title{
      @include rect(100%,0.32rem);
      box-sizing: border-box;
      padding: 0.16rem 0 0 0 ;

      @include flexbox();
      span {
        display: block;
        @include rect(4px,100%);
        background: green;
        margin-right: 0.2rem;

      }
      p{
        font-size: 16px;
        line-height: 1;
      }
    }
    .jingpinlist{
      @include rect(100%,1.86rem);
      box-sizing: border-box;
      padding: 10px 0 10px 10px;
      border-bottom: 1px solid #eeeeee;
      ul{
        @include rect(100%,100%);

        @include flexbox();

        a{
          @include flex();
          @include flexbox();
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 16px 0 0;
          color: #000000;
          div{
            @include rect(0.84rem,1.11rem)
          }
          img{@include rect(0.84rem,100%);
          }
          span{font-size: 14px;
            display: block;
            @include rect(100%,0.16rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis }
        }
      }

    }
    .change{
      @include rect(100%,0.48rem);
      @include flexbox();
      justify-content: center;
      align-items: center;
      border-bottom: 8px solid #eeeeee;

    }
    .girllist2{
      @include flexbox();
      flex-direction: column;
    }
    .girllistbox{
      @include rect(100%,2.3rem);
      box-sizing: border-box;
      padding: 0 0 0 0.12rem;
      ul{
        @include rect(100%,100%);
        @include flexbox();
        flex-direction: column;
        a{
          @include rect(100%,0.77rem);
          box-sizing: border-box;
          padding: 0.12rem 0.12rem 0.12rem 0;
          @include flexbox();
          flex-direction: column;
          justify-content: space-around;
          border-bottom: #eeeeee;
          color: #000;
          div{
            @include flexbox();
            justify-content: space-between;

            p{
              @include flexbox();
              justify-content: space-between;
              width: 1.2rem;
              span{
                display: block;
                border-radius: 4px;

              }
              .stat_name{
                @include rect(0.35rem,100%);
                border:1px solid #dddddd;
                color: green;
                font-size: 0.12rem;
                text-align: center;
              }
              .first_cate_name{
                @include rect(0.65rem,100%);
                border:1px solid #dddddd;
                color: #bbbbbb;
                font-size: 0.12rem;
                text-align: center;
              }
            }
          }
          .introduction {
            font-size: 14px;
            display: block;
            @include rect(100%, 0.16rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #bbbbbb;

          }
        }
      }
    }




  .swiper-container{
    @include rect(100%,1.86rem);
    box-sizing: border-box;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid #eeeeee;
    .swiper-wrapper{
      ul{
        @include rect(100%,100%);

        @include flexbox();

        a{
          @include flex();
          @include flexbox();
          flex-direction: column;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 16px 0 0;
          color: #000000;
          div{
            @include rect(0.84rem,1.11rem)
          }
          img{@include rect(0.84rem,100%);
          }
          span{font-size: 14px;
            display: block;
            @include rect(100%,0.16rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis }
        }
      }
    }


  }
.jingxuanmeiyan{
  @include rect(100%,0.28rem);
  padding: 0.12rem;
  @include flexbox();
  justify-content: space-between;
  font-size: 0.12rem;
  margin-bottom: 8px;
  color: green;
  align-items: center;
  span{
    display: block;
    @include rect(1.2rem,2px);
    background: #eeeeee;
  }
}

    .home_changxiaoone{
      @include rect(100%,1.45rem);
      box-sizing: border-box;
      padding: 0.12rem;
      @include flexbox();

      .image{
        @include rect(0.84rem,100%);
        margin-right: 0.15rem;
        img{
          @include  rect(100%,auto)
        }

      }
      .detail{
        @include  flex();
        @include flexbox();
        flex-direction: column;
        color: #999;
        p{
          font-size: .14rem;

          color: #999;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin: 0.06rem 0;
          max-height: 100%;
        }
        .muchspan{
          @include flexbox();
          span{
            display: block;
            padding: 3px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            margin-right: 5px;
            font-size: 12px;
          }
        }
      }
    }
    .home_changxiaotwo{
      @include rect(100%,auto);
      box-sizing: border-box;
      padding: 0 0 0 0.12rem;
      a{
        @include  rect(100%,0.52rem);
        box-sizing: border-box;
        padding: 0.12rem 0.12rem 0.12rem 0;
        border-bottom: 1px solid #eeeeee;
        @include flexbox();
        @include justify-content(space-between);
        color: #000000;
        div{
          @include flexbox();
          @include justify-content(space-between);
          span{
            margin-right: 0.12rem;
          }
        }
      }
    }

  }
}